<!DOCTYPE html>
<html>
  <head>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
    />
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      [v-cloak] {
        display: none;
      }

      table {
        width: 620px;
        border: 1px solid red;
        text-align: center;
      }
      thead {
        background-color: cornflowerblue;
      }
      #pop {
        position: absolute;
        left: 40%;
        top: 200px;
        z-index: 1999;
        background: rgba(0, 0, 0, 0.3);
        width: 380px;
        height: 100px;
        padding: 20px;
      }
    </style>
  </head>
  <div id="app" class="container" v-cloak>
    <!--第一部分-->
    <h3>简易商品管理系统</h3>
    <div>
      <label for="username">商品名:</label>
      <input
        type="text"
        id="username"
        class="form-control"
        placeholder="输入商品名"
        v-model="newproduct.name"
      />
    </div>
    <div>
      <label for="">价格:</label>
      <input
        type="text"
        name=""
        id=""
        class="form-control"
        value=""
        placeholder="请输入价格"
        v-model.number="newproduct.price"
      />
    </div>
    <button @click="creatNewproduct()" class="btn btn-danger">新增商品</button>
    <!--第二部分-->
    <hr />
    <h3 class="h3 text-info">商品信息</h3>
    <button @click="avg" class="btn-sm">显示所有商品的平均价格</button>
    <button @click="sortedproducts()" class="btn-sm">
      按升序显示所有商品的价格
    </button>
    <table class="table table-bordered table-hover">
      <thead>
        <tr>
          <td>商品名</td>
          <td>价格</td>
          <td>操作</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(product,index) in products">
          <td>{{product.name}}</td>
          <td>{{product.price}}</td>
          <td>
            <button @click="changeproduct(index)" class="btn btn-success">
              修改
            </button>
            <button @click="deleteproduct(index)" class="btn btn-primary">
              删除
            </button>
          </td>
        </tr>
      </tbody>
    </table>
    按商品名搜索：<input type="text" v-model="search" />
    <button @click="filteredproducts()" class="btn btn-primary">搜索</button>
    <div id="pop" v-show="popshow">
      商品名：<input type="text" name="" id="" value="" v-model="changestu" />
      <button type="button" @click="changed()">修改</button>
      <button type="button" @click="closed()">关闭</button>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  <script type="text/javascript">
    var vm = new Vue({
      el: "#app",
      data: {
        products: [
          { name: "饮料", price: 20 },
          { name: "蜜饯", price: 22 },
          { name: "饼干", price: 21 },
          { name: "糖果", price: 20 },
        ],
        newproduct: { name: "", price: 0 },
        search: "",
        popshow: false,
        changestu: "ddd",
        changeindex: 0,
      },
      methods: {
        creatNewproduct() {
          //商品名不能为空
          if (this.newproduct.name === "") {
            alert("商品名不能为空");
            return;
          }
          //价格不能小于0
          if (this.newproduct.price < 0) {
            alert("年龄不能小于10");
            return;
          }
          //往数组中添加一个新记录
          this.products.unshift(this.newproduct);
          //清空数据
          this.newproduct = { name: "", price: 0 };
        },
        //删除一条记录
        deleteproduct(index) {
          this.products.splice(index, 1);
        },
        filteredproducts() {
          search = this.search;
          vm.products = this.products.filter(function (item) {
            return item.name.match(search);
          });
        },
        sortedproducts() {
          this.products.sort(function (a, b) {
            return a.price - b.price;
          });
        },
        avg() {
          alert("平均价格为：" + this.sum / this.products.length);
        },
        changeproduct(index) {
          this.popshow = true;
          this.changestu = this.products[index].name;
          this.changeindex = index;
        },
        changed() {
          this.products[this.changeindex].name = this.changestu;
          alert("修改成功！");
          this.popshow = false;
        },
        closed() {
          this.popshow = false;
        },
      },
      computed: {
        sum() {
          var sum = 0;
          for (var i = 0; i < this.products.length; i++) {
            sum += this.products[i].price;
          }
          return sum;
        },
      },
    });
  </script>
</html>
